<template>
	<view class="">
		<NavTitle :title="title" :backgroundColor='backgroundColor' @leftClick="leftClick"></NavTitle>
		<view class="tab-nav">
			<view class="tab-list-item" v-for="(item,index) in toggleList" :key="index"
				@click="clickToggleHandle(item,index)">
				<view :class="{ active: indexs==index}" class="text">{{ item.label }}</view>
				<view class="line" v-if="indexs==index">

				</view>
			</view>
		</view>
		<view class="shopDetail flex_dq" v-for="(item,index) in storeList" :key="index" v-if="indexs==0">
			<view class="flex_dq">
				<image :src="item.detail.logo" class="images" mode="aspectFill"></image>
				<view class="flex_Z shopInfo">
					<view class="">
						<text class="sign"
							v-if="item.detail.company_type !='sole_proprietorship' && item.detail.company_type !='ordinary'">{{item.detail.company_type_text}}</text>
						<text class="shopName">{{item.detail.name}}</text>

					</view>
														<u-rate  style="margin-top: 18rpx;" :allowHalf="true" readonly size="18" activeColor="#ffc300"  v-model="item.detail.evaluate_rate"></u-rate>

					
					<view class="goods_prove">
						<view class="" v-if="item.detail.earnest_money_total!=0.00">
							<image :src="baseUrl +'/static/ymimage/yjbzj.png'" mode="aspectFill"></image> 已缴纳保证金
						</view>
						<view v-if="item.detail.verify_status == 3">
							<image :src="baseUrl +'/static/ymimage/zzsh.png'" mode="aspectFill"></image>资质已审核
						</view>
					</view>
				</view>
			</view>
			<view class="flex_Z">
				<text class="btn_an1 c1" @click="toAstore(item)">进店看看</text>
			</view>
		</view>
		<view class="shopDetail flex_dq" v-for="(item,index) in storeList2" :key="index" v-if="indexs==1">
			<view class="flex_dq">
				<image :src="item.detail.cover" class="images" mode="aspectFill"></image>
				<view class="shopInfo" style="justify-content: space-between;">
					<view class="">
						<text class="shopName">{{item.detail.name}}</text>
					</view>
					<view class="" style="display: flex;">
						<image  class="tagimage" :src="item.detail.attach.seller_level.name_image" mode="widthFix"></image>
						<image class="rateimg" v-for="item1 in item.detail.attach.seller_level.level_data.image_data"  :src="item1" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			<view class="flex_Z">
				<text class="btn_an1 c1" style="margin-top: 60rpx;" @click="toAstore2(item)">进店看看</text>
			</view>
		</view>
		<view class="empty2">

		</view>
		<noDatas v-if="indexs==0" :xxxList="storeList" :status="status"></noDatas>
		<noDatas v-if="indexs==1" :xxxList="storeList2" :status="status2"></noDatas>
	</view>
</template>

<script>
	import {
		shopCollectList
	} from '@/api/settled.js'

	import {
		collectlist
	} from "../../api/local.js"
	export default {
		data() {
			return {
				title: "店铺收藏",
				backgroundColor: "",
				baseUrl: this.$imageBaseUrl,
				storeList: [],
				status: "loadmore",
				page: 1,
				size: 50,
				toggleList: [{
						label: '云猫',
						statusval: "",
						select: true
					}, {
						label: '地猫',
						statusval: "1",
						select: false
					}


				],
				page2: 1,
				size2: 20,
				status2: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				indexs: 0,
				storeList2:[]
			}
		},
		onShow() {
			this.getCollectList()
		},
		onLoad() {

		},
		// 页面滚动
		onPageScroll: function(e) {
			const scrollTop = e.scrollTop; // 获取页面滚动位置
			// 根据滚动位置修改状态栏样式
			if (scrollTop > 20) {
				this.backgroundColor = '#ffffff';
			} else {
				this.backgroundColor = '';
			}
		},
		onReachBottom() {
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getlist()
			}
		},
		methods: {
			clickToggleHandle(ele, index) {
				// this.statusval=ele.statusval
				this.indexs = index
				this.toggleList.forEach(item => item.select = false)
				// this.currLabel = ele.label
				if (this.indexs == 0) {
					this.page = 1

					this.getCollectList()
				}
				if (this.indexs == 1) {

					this.page2 = 1
					this.getCollectList2()
				}
				ele.select = true

			},
			toAstore(item) {
				uni.navigateTo({
					url: '/pagesMy/cloudCat/shopDetails?id=' + item.detail.id
				})
			},
			toAstore2(item) {
				uni.navigateTo({
					url: '/pagesMy/groundCat/merchantHomepagew?id=' + item.detail.id
				})
			},
			getCollectList() {
				const data = {
					scene_type: 2,
					page: this.page,
					page_size: this.size
				}
				shopCollectList(data).then(res => {
					console.log(res);
					let list = res.data.data;
					this.storeList = this.page == 1 ? list : this.storeList.concat(list);
					if (list.length < this.size) this.status = 'nomore';
					else this.status = 'loading';
				})
			},
			getCollectList2() {
				const data = {
					scene_type: 2,
					page: this.page2,
					page_size: this.size2
				}
				collectlist(data).then(res => {
					console.log(res);
					let list = res.data.data;
					this.storeList2 = this.page2 == 1 ? list : this.storeList2.concat(list);
					if (list.length < this.size2) this.status2 = 'nomore';
					else this.status2 = 'loading';
				})
			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
		},
		onPullDownRefresh() {
			if (this.indexs == 0) {
				console.log('下拉刷新');
				let that = this;
				setTimeout(function() {
					that.page = 1
					that.cursor = 1
					that.storeList = []
					that.getCollectList()
				}, 800);
			}
			if (this.indexs == 1) {
				console.log('下拉刷新');
				let that = this;
				setTimeout(function() {
					that.page2 = 1
					that.getCollectList2()
				}, 800);
			}

		},
		//触底加载
		onReachBottom() {
			if (this.indexs == 0) {
				console.log('触底加载');
				if (this.status != 'nomore') {
					this.page = this.page + 1
					this.getCollectList()
				}
			} else {
				if (this.status2 != 'nomore') {
					this.page2 = this.page2 + 1
					this.getCollectList2()
				}
			}

		}
	}
</script>

<style scoped lang="scss">
	.shopDetail {
		width: 750rpx;
		padding: 18rpx 30rpx;
		justify-content: space-between;
		position: relative;
		z-index: 9;
	}

	.tab-nav {
		width: 750rpx;
		height: 100rpx;
		// background-color: #fff;
		// margin-left: 20rpx;
		display: flex;
		align-items: center;
		// position: fixed;

		// z-index: 999;
		justify-content: space-around;

		.tab-list-item {
			position: relative;

			.text {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10rpx;
				opacity: 1;
				font-weight: 500;
				text-align: center;
				font-size: 32rpx;
				color: #A6A5AF;
				z-index: 99;
				position: relative;
			}

			.active {
				font-weight: 700;
				color: #333333;
				z-index: 98;
				position: relative;
			}

			.line {
				width: 66rpx;
				height: 10rpx;
				background: linear-gradient(90deg, #FA2222 2%, #FFC400 98%);
				border-radius: 118rpx 118rpx 118rpx 118rpx;
				position: absolute;
				top: 85%;
				left: 50%;
				transform: translate(-50%);
				z-index: 60;
			}
		}
	}

	.images {
		width: 122rpx;
		height: 122rpx;
		border-radius: 12rpx;
		margin-right: 24rpx;
	}

	.shopInfo {
		width: 400rpx;
		height: 122rpx;
		display: flex;
		flex-direction: column;
		
		line-height: 46rpx;
	}

	.sign {
		/* width: 76rpx;
		height: 28rpx; */
		background: #FFC300;
		border-radius: 8rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 28rpx;
		margin-right: 16rpx;
		padding: 2rpx 4rpx;
	}

	.shopName {
		width: 300rpx !important;
		font-weight: 500;
		color: #3D3D3D;
		white-space: nowrap;
		/* 防止文本换行 */
		overflow: hidden;
		/* 隐藏溢出内容 */
		text-overflow: ellipsis;
		/* 显示省略号 */
	}

	.goods_prove {
		font-size: 24rpx;
		color: #666666;
		display: flex;
		align-items: center;
	}

	.goods_prove view {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.goods_prove image {
		width: 22rpx;
		height: 24rpx;
		margin-right: 6rpx;
	}

	.btn_an1 {
		width: 146rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		font-size: 28rpx;
		border-radius: 12rpx;
		border: 1rpx solid #FFC300;
		margin-bottom: 14rpx;
	}
			.rateimg{
				width: 30rpx;
				height: 30rpx;
				margin: 6rpx;
			}
						.tagimage{
							width: 126rpx;
							height: 40rpx;
						}
</style>